<template>
  <div class="container">
    <div class="app-container" style="padding: 20px;">
      <el-button type="primary" @click="showAddRuleDialog">增加停车计费规则</el-button>
      <el-table :data="rulesList" style="width: 100%; margin-top: 20px;">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="ruleNumber" label="计费规则编号" />
        <el-table-column prop="ruleName" label="计费规则名称" />
        <el-table-column prop="freeDuration" label="免费时长（分钟）" />
        <el-table-column prop="chargeCeiling" label="收费上限（元）">
          <template #default="{ row }">
            {{ row.chargeCeiling ? row.chargeCeiling : '----' }}
          </template>
        </el-table-column>
        <el-table-column prop="chargeType" label="计费方式">
          <template #default="{ row }">
            <span v-if="row.chargeType === 'duration'">时长收费</span>
            <span v-else-if="row.chargeType === 'turn'">按次收费</span>
            <span v-if="row.chargeType === 'partition'">分段收费</span>
          </template>
        </el-table-column>
        <el-table-column prop="ruleNameView" label="计费规则" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editRule(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="deleteRule(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 20px;" type="flex" justify="end">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>

    <!-- 添加/编辑规则对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="closeDialog">
      <el-form ref="ruleForm" size="mini" :model="form" label-width="160px">
        <el-form-item label="计费规则编号">
          <el-input v-model="form.ruleNumber" style="width: 80%;" />
        </el-form-item>
        <el-form-item label="计费规则名称">
          <el-input v-model="form.ruleName" style="width: 80%;" />
        </el-form-item>
        <el-form-item label="计费方式（全天收费）">
          <el-radio v-model="form.chargeType" name="radio" label="duration" border>时长收费</el-radio>
          <el-radio v-model="form.chargeType" name="radio" label="turn" border>按次收费</el-radio>
          <el-radio v-model="form.chargeType" name="radio" label="partition" border>分段收费</el-radio>
        </el-form-item>
        <el-row style="width: 80%;" type="flex">
          <el-col>
            <el-form-item label="免费时长">
              <el-input v-model.number="form.freeDuration" type="number">
                <template #append>分钟</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="收费上限">
              <el-input v-model.number="form.chargeCeiling">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="计费规则">
          <template>
            <el-row v-if="form.chargeType === 'duration'">
              <span>每</span>
              <el-input-number v-model.number="form.durationTime" style="width: 15%; margin: 0 5px;" controls-position="right" :min="1" :max="10" @change="changeNum" />
              <el-select v-model="form.durationType" placeholder="请选择">
                <el-option label="小时" value="hour" />
                <el-option label="分钟" value="minute" />
              </el-select>
              <el-input v-model="form.durationPrice" style="margin: 0 5px; width: 20%;" placeholder="请输入" />
              <span>元</span>
            </el-row>
            <el-row v-else-if="form.chargeType === 'turn'">
              <span>每次</span>
              <el-input v-model.number="form.turnPrice" style="margin: 0 10px; width: 40%;" placeholder="请输入金额" />
              <span>元</span>
            </el-row>
            <template v-else>
              <el-row>
                <el-input v-model.number="form.partitionFrameTime" size="mini" style="margin-right: 10px; width: 20%;" placeholder="请输入" />
                <span>小时内, 每小时收费</span>
                <el-input v-model.number="form.partitionFramePrice" size="mini" style="margin: 0 10px; width: 20%;" placeholder="请输入" />
                <span>元</span>
              </el-row>
              <el-row>
                <span>每增加</span>
                <el-input v-model.number="form.partitionIncreaseTime" size="mini" style="margin: 0 10px; width: 20%;" placeholder="请输入" />
                <span>小时, 增加</span>
                <el-input v-model.number="form.partitionIncreasePrice" size="mini" style="margin:20px; width: 20%;" placeholder="请输入" />
                <span>元</span>
              </el-row>
            </template>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRule">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addBillingRuleAPI, delBillingRuleAPI, getBillingRuleListAPI } from '@/api'

export default {
  data() {
    return {
      rulesList: [],
      total: 0,
      queryParams: {
        pageSize: 10,
        page: 1
      },
      dialogVisible: false,
      dialogTitle: '添加计费规则',
      form: {
        ruleNumber: '',
        ruleName: '',
        freeDuration: '',
        chargeCeiling: '',
        chargeType: 'duration',
        durationTime: '',
        durationPrice: '',
        durationType: 'minute',
        turnPrice: '',
        partitionFrameTime: '',
        partitionFramePrice: '',
        partitionIncreaseTime: '',
        partitionIncreasePrice: ''
      }
    }
  },
  watch: {
    'form.chargeType': () => {
      this.$refs.ruleForm.resetFields()
    }
  },
  created() {
    this.getRuleList()
  },
  methods: {
    // 获取规则列表
    async getRuleList() {
      const { total, rows } = await getBillingRuleListAPI(this.queryParams)
      this.total = total
      this.rulesList = rows
    },
    async deleteRule(id) {
      await this.$confirm('确定删除这条数据吗？')
      await delBillingRuleAPI(id)
      this.$message.success('删除成功')
      this.getRuleList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getRuleList()
    },
    handleCurrentChange(page) {
      this.queryParams.page = page
      this.getRuleList()
    },
    showAddRuleDialog() {
      this.dialogVisible = true
    },
    changeNum(num) {
      this.num = num
    },
    async saveRule() {
      await addBillingRuleAPI(this.form)
      this.$message.success('添加停车规则成功')
    },
    async closeDialog() {
      await this.$refs.ruleForm.resetFields()
      this.form = {
        ruleNumber: '',
        ruleName: '',
        freeDuration: '',
        chargeCeiling: '',
        chargeType: 'duration',
        durationTime: '',
        durationPrice: '',
        durationType: 'minute',
        turnPrice: '',
        partitionFrameTime: '',
        partitionFramePrice: '',
        partitionIncreaseTime: '',
        partitionIncreasePrice: ''
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
